<template>
  <div>
    <div class="header wrapper">

      <!-- 导航 -->
      <div id="nav">
        <ul>
          <li @click=" get_new_list('boke') "
              :class="type == 'boke'?'busty':''"><a id="zx">首页</a></li>
          <li><a href="">课程</a></li>
          <li><a href="">直播</a></li>
          <li @click=" get_new_list('zixun') "
              :class="type == 'zixun'?'busty':''"><a id="zx">资讯</a></li>
          <li><a href="">活动</a></li>
          <li><a href="">开发社区</a></li>
          <li><a href="">商城</a></li>
          <li><a href="">APP</a></li>
          <li><a href="">插件</a></li>
          <li><a href=""><img src="./image/gg1.gif"
                   alt=""
                   width="90px"
                   height="40px"></a></li>
        </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <input type="text"
               class="searchTerm"
               placeholder="探索稀土掘金" v-model="keyWord">
        <button type="submit"
                class="searchButton">
          <i class="fa fa-search"
             style="font-size:auto;color:blue;"></i> <!-- 设置搜索图标属性 -->
        </button>
      </div>
      <!-- 用户-->
      <div class="user">
        <button type="submit"
                value=""
                id="dl">登录</button>
        <img src="./image/user.png"
             alt="">
        <span>防火墙</span>
      </div>
    </div>

    <!-- 二级导航 -->
    <div id="nave">
      <!--导航栏-->
      <div class="navwrape">
        <ul>
          <li v-for="p of fenlei_list"
              :key="p.id"
              @click="get_new_list(type,{'type':p.id})">
            <a> {{p.name||p.flName}}</a>
          </li>

        </ul>
      </div>
    </div>
    <div class="out-main">
      <div class="main_iner">

        <div class="tzr">
          <div class="tzrn">
            <ul>
              <li><a href="#"
                   style="color: #66afe9;">推荐</a></li>
              <li><a href="#">最新</a></li>
              <li @click="hot()"><a >热榜</a></li>

            </ul>
          </div>
          <!-- 分割线 -->
          <hr id="hr1">
        </div>

        <div class="tjnr1"
             onclick="fd.html">
          <ul>
            <li><a href="#"
                 id="a1">掘金酱</a></li>
            <li><a href="#"
                 id="a1">4天前</a></li>

          </ul>
          <input type="button"
                 name=""
                 id=""
                 value="广告">
          <div id="div1">
            <a href="#">持续创作，加速成长，6月更文活动正在进行</a>

          </div>
          <div id="div11">
            <a href="#">闯关阅读奖品叠加越丰厚，马上参与>></a>
          </div>

          <!-- <p id="">持续创作，加速成长，6月更文活动正在进行 &nbsp;&nbsp;|</p>	 -->
          <!-- 第一篇文章广区 -->
          <div id="ydiv111">

          </div>

        </div>

        <!-- 第二篇文章 -->
        <div id="wdiv2"
             v-show="type=='zixun'"
             v-for="p of news_list"
             :key="p.id"
             @click="router(p.id,'zixun')">
          <hr>
          <div class="tjnr1">
            <ul>
              <li><a href="#"
                   id="a1">{{p.author}}</a></li>
              <li><a href="#"
                   id="a1">{{p.createTime}}</a></li>
              <li><a href="#"
                   id="a1">{{p.type_dictText}}</a></li>

            </ul>
            <!-- <input type="button" name="" id="" value="广告"> -->
            <div id="div1">
              <a href="">{{p.title}}</a>

            </div>
            <div id="div11">
              <a href="#">{{p.subTitle}}</a>
            </div>
            <div id="ckqk">
              <ul>
                <li><a href="#">观看：{{p.redingNum}}</a></li>
                <li><a href="#">点赞</a></li>
                <li><a href="#">{{p.redingNum}}</a></li>

              </ul>
            </div>

            <!-- <p id="">持续创作，加速成长，6月更文活动正在进行 &nbsp;&nbsp;|</p>	 -->
            <!-- 第二篇文章广区 -->
            <div id="ydiv111">
              {{p.titleImg}}
            </div>
          </div>
          <hr>
        </div>
        <div id="wdiv2"
             v-show="type=='boke'"
             v-for="p of news_list"
             :key="p.id"
             @click="router(p.id,'boke')">
          <hr>
          <div class="tjnr1">
            <ul>
              <li><a href="#"
                   id="a1">{{p.createBy}}</a></li>
              <li><a href="#"
                   id="a1">{{p.createTime}}</a></li>
              <li><a href="#"
                   id="a1">{{p.bkFenlei}}</a></li>

            </ul>
            <!-- <input type="button" name="" id="" value="广告"> -->
            <div id="div1">
              <a href="">{{p.tittle}}</a>

            </div>
            <div id="div11">
              <a href="#">{{p.zhaiyao}}</a>
            </div>
            <div id="ckqk">
              <ul>
                <li><a href="#">观看：{{p.readCount}}</a></li>
                <li><a href="#">点赞</a></li>
                <li><a href="#">{{p.readCount}}</a></li>

              </ul>
            </div>

            <!-- <p id="">持续创作，加速成长，6月更文活动正在进行 &nbsp;&nbsp;|</p>	 -->
            <!-- 第二篇文章广区 -->
            <div id="ydiv111">
              {{p.titleImg}}
            </div>
          </div>
          <hr>
        </div>

      </div>
      <!--页面低端  -->
      <!-- 右侧部分 -->
      <div id="right">
        <div class="right1">
          <p class="wh">上午好！</p>
          <a href=""><input type="button"
                   value="去签到"
                   class="qd1"></a>
          <p class="dl">点亮你在社区的每一天</p>

        </div>
        <!-- 广告1 -->
        <div class="right2">

        </div>
        <!-- 广告2 -->
        <div class="right3">

        </div>
        <!-- 扫描二维码下载 -->
        <div class="right4">
          <a href=""
             class="a1">下载稀土掘金APP</a>
          <P class="p1">一个帮助开发者成长的社区</P>
        </div>
        <!-- 作者榜 -->
        <div class="right5">

          <h4>作者榜</h4>
          <hr>
          <div id="zz1">
            <a href=""
               id="a1">
              <img src="./image/z1.jpeg"
                   alt="">
              <p class="zp1">王中阳Go</p>
              <p class="zp2"> 好喜欢新海诚</p>

            </a>

          </div>
          <div id="zz1">
            <a href=""
               id="a1">
              <img src="./image/z1.jpeg"
                   alt="">
              <p class="zp1">王中阳Go</p>
              <p class="zp2"> 好喜欢新海诚</p>

            </a>
          </div>
          <div id="zz1">
            <a href=""
               id="a1">
              <img src="./image/z1.jpeg"
                   alt="">
              <p class="zp1">王中阳Go</p>
              <p class="zp2"> 好喜欢新海诚</p>

            </a>
          </div>
          <div id="wzb">
            <a href=""
               id="a1">完整榜单>></a>
          </div>

        </div>

        <!-- 操作指南 -->
        <div class="right6">
          <div id="zn">
            <a href="">
              <img src="./image/z1.jpeg"
                   alt="">

              <p class="wzn1">稀土掘金漫游指南</p>

            </a>
          </div>

          <div id="zn">
            <a href="">
              <img src="./image/z1.jpeg"
                   alt="">

              <p class="wzn1">安装掘金浏览器插件</p>

            </a>
          </div>
          <div id="zn">
            <a href="">
              <img src="./image/z1.jpeg"
                   alt="">

              <p class="wzn1">前往掘金翻译计划</p>

            </a>
          </div>

        </div>

      </div>
    </div>
    <!-- 底部页面 -->
    <div id="footer">
      <ul>
        <li><a href="">用户协议</a></li>
        <li><a href="">营业执照</a></li>
        <li><a href="">隐私政策</a></li>
        <li><a href="https://juejin.cn/about"
             target="_blank"
             rel="nofollow"
             data-v-18d4e3b6="">关于我们</a></li>
        <li><a href="">站点地图</a></li>
        <li><a href="">使用指南</a></li>
        <li><a href="">友情链接</a></li>
        <li><a href="">更多文章</a></li>
        <li><a href="">京ICP备18012699号-3</a></li>
        <li><a href=""><img src="./image/3.png">京公网安备11010802026719号</a></li>
        <li><a href="">版权所有：北京北比信息技术有限公司</a></li>
        <li><a href="">公司地址：北京市海淀区信息路甲28号13层B座13B-5</a></li>
        <li><a href="">公司座机：010-83434395</a></li>
        <li><a href="">举报邮箱： feedback@xitu.io</a></li>
        <li><a href="">2022 稀土掘金</a></li>
        <li id="wbm"><a href=""><img src="./image/wb.png"
                 alt=""></a></li>
        <li id="wxm"><a href=""><img src="./image/wx.png"
                 alt=""></a></li>
      </ul>

    </div>

  </div>

</template>

<script>
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      url: '', //列表api
      fenlei_url: '',
      news_list: '', //列表
     all_list: '', //列表
      fenlei_list: '',
      type: 'boke', //初始值：展示博客内容
      keyWord:''
    }
  },
  methods: {
   
   // 热榜
    hot(){
      if (this.type== 'boke') {
        this.news_list = this.sortKey(this.news_list, 'readCount')
      } else {
        this.news_list = this.sortKey(this.news_list, 'redingNum')
      }
        
    },
     sortKey(array, key) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        return x > y ? -1 : x < y ? 1 : 0
      })
    },
    // 获取新闻列表
    get_new_list(type, params = {}) {
      this.type = type
      console.log(params)
      switch (type) {
        case 'boke':
          this.url = '/bkWenzhang/bkWenzhang/list'
          this.fenlei_url = '/bkFenlei/bkFenlei/list'
          break
        case 'zixun':
          console.log('zixun')
          this.fenlei_url = '/juejingzixuntype/juejingZixunType/rootList'
          this.url = '/juejingzixun/juejingZixunList/list'
          break
        default:
          break
      }

      // 请求获取新闻列表
      getAction(this.url, params).then((res) => {
        if (res.success) {
          this.news_list = res.result.records;
          this.all_list = res.result.records;
        }
      })

      // 请求获取分类列表
      getAction(this.fenlei_url).then((res) => {
        if (res.success) {
          this.fenlei_list = res.result.records;
            this.all_list = res.result.records
          console.log(this.fenlei_list)
        }
      })
      console.log(this.news_list);
    },
    router(id, type) {
      if (type == 'boke') {
        // 跳转的页面不是同级目录
        this.$router.push({
          name: 'zixun_content', // 去 demo1 文件夹下寻找 test 组件
          query: {
            // 路由携带参数
            id: id,
            type: 'boke',
          },
        })
      } else {
        // 跳转的页面不是同级目录
        this.$router.push({
          name: 'zixun_content', // 去 demo1 文件夹下寻找 test 组件
          query: {
            // 路由携带参数
            id: id,
            type: 'zixun',
          },
        })
      }
    },
     // 获取url参数id
    loadDate() {
       
      if(this.$route.query.type !="boke" && this.$route.query.type){
        if(this.$route.query.fenleiid){
             this.type =this.$route.query.type;
                  this.get_new_list(this.type,{'type':this.$route.query.fenleiid});
        }else{
              this.type =this.$route.query.type;
                  this.get_new_list(this.type);
        }
        
      }
     
    },
  },
   		watch:{
					keyWord:{
						immediate:true,
						handler(val){
              
							this.news_list = 	this.all_list.filter((p)=>{
								return p.title.indexOf(val) !== -1
							})
						}
					}
				},
  created() {
    this.get_new_list(this.type)
    this.loadDate();
  },
}
</script>
<style>
@import './css/base.css';
@import './css/index.css';
@import './css/nav.css';
</style>